<template>
  <div class="order">
    <nav>
        <router-link to="/order/allOrder">
            <i>全部</i>
        </router-link>
        <span></span>
        <router-link to="/order/noPay">
            <i>待付款</i>
        </router-link>
        <span></span>
        <router-link to="/order/noSend">
            <i>待发货</i>
        </router-link>
        <span></span>
        <router-link to="/order/noReceive">
            <i>待收货</i>
        </router-link>
        <span></span>
        <router-link to="/order/noComment">
            <i>待评价</i>
        </router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>

  export default{

  }

</script>

<style>
.order{
    width: 100%;
    height: 47.33rem;
    background-color:#f3f3f3;
    position: absolute;
    z-index: 11;
}
.order nav{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    border-bottom: solid 1px #EEE;
    background: #FFF;
    color: #333;
    font-size: 14px;
    text-align: center;
    display: flex;
    justify-content: space-around;
}
.order nav a{
    width: 19.9%;
    line-height: 40px;
    position: relative;
    display:
}
.order nav span{
    width: 1px;
    height: 12px;
    background: #ddd;
    display: inline-block;
    margin-top: 14px;
}
.order .router-link-active{
    color:#ff3355;
    background: url(../../assets/images/icon_on.png) no-repeat center bottom;
    background-size: 20px 10px;
}

</style>
